// ui/components/LogEntryList.js
import LogEntryListItem from './LogEntryListItem.js'; // Assuming LogEntryListItem.js will be created

export default {
  name: 'LogEntryList',
  components: {
    'log-entry-list-item': LogEntryListItem,
    // ElementPlus components (ElScrollbar, ElEmpty, ElPagination) are globally registered
  },
  props: {
    entries: {
      type: Array, // Was PropType<LLMLogEntrySummaryModel[]>
      required: true,
      default: () => []
      // JSDoc for reference:
      /**
       * @type {Array<{
       *   log_entry_id: string;
       *   timestamp_call_start: string;
       *   llm_call_type: string;
       *   outcome_summary: string;
       *   has_public_message: boolean;
       * }>}
       */
    },
    currentPage: {
      type: Number,
      required: true
    },
    totalPages: {
      type: Number,
      required: true
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['select-entry', 'page-changed'],
  setup(props, { emit }) {
    function handleViewDetail(logEntryId) { // logEntryId was string
      emit('select-entry', logEntryId);
    }

    function changePage(newPage) { // newPage was number
      if (newPage >= 1 && newPage <= props.totalPages && newPage !== props.currentPage) {
        emit('page-changed', newPage);
      }
    }

    return {
      handleViewDetail,
      changePage,
      // props are automatically available in the template
    };
  },
  template: `
  <div
    class="log-entry-list-container"
    v-loading="isLoading && (!entries || entries.length === 0)"
    element-loading-text="正在加载日志条目..."
  >
    <el-scrollbar v-if="entries && entries.length > 0" class="log-list-scrollbar" height="100%">
      <ul class="log-entry-list">
        <log-entry-list-item
          v-for="entry in entries"
          :key="entry.log_entry_id"
          :entry="entry"
          @view-detail="handleViewDetail"
        />
      </ul>
    </el-scrollbar>
    <el-empty v-else-if="!isLoading" description="没有可显示的日志条目。" class="empty-list-message" />
    
    <div v-if="totalPages > 1" class="pagination-controls">
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-count="totalPages"
        :disabled="isLoading"
        @current-change="changePage"
        class="log-pagination"
      />
    </div>
  </div>
  `
};